<template>
    <widget-root :styles="styles">
        <!-- v-if="content.data.length" -->
        <view
            class="seckill"
            :class="themeName"
            :style="{
                'background-color': styles.content_bg_color,
                'border-radius': `${$px2rpx(styles.border_radius_top)}rpx ${$px2rpx(
                    styles.border_radius_top
                )}rpx ${$px2rpx(styles.border_radius_bottom)}rpx ${$px2rpx(
                    styles.border_radius_bottom
                )}rpx`
            }"
        >
            <view class="seckill-header flex" :style="[headerStyle]">
                <view class="flex-1 flex">
                    <image
                        mode="heightFix"
                        v-if="content.header_icon_image"
                        class="flex-none m-r-10"
                        style="height: 22px"
                        :src="$getImageUri(content.header_icon_image)"
                    />
                    <view
                        class="line-1"
                        :style="{
                            'max-width': '400rpx',
                            color: styles.header_title_color,
                            'font-size': `${$px2rpx(styles.header_title_size)}rpx`
                        }"
                    >
                        {{ content.header_title }}
                    </view>
                </view>
                <view
                    class="more flex-none xs"
                    v-if="content.show_haeder_more"
                    :style="{
                        color: styles.header_more_color
                    }"
                >
                    <router-link to="/bundle/pages/goods_presell/goods_presell">
                        {{ content.header_more_text }}
                        <u-icon name="arrow-right" size="26"></u-icon>
                    </router-link>
                </view>
            </view>
            <view
                class="seckill-goods"
                :style="{
                    margin: `-${$px2rpx(styles.margin / 2)}rpx`,
                    padding: '20rpx'
                }"
            >
                <view
                    class="goods-lists"
                    :class="{
                        lists: content.style == 1,
                        swiper: content.style == 2
                    }"
                >
                    <view class="goods-wrap" v-for="(item, index) in content.data" :key="index">
                        <router-link
                            :to="{
                                path: '/bundle/pages/presell_detail/presell_detail',
                                query: { id: item.id }
                            }"
                        >
                            <view
                                class="goods-item"
                                :style="{
                                    'background-color': styles.goods_bg_color,
                                    margin: `${$px2rpx(styles.margin / 2)}rpx`,
                                    'border-radius': `${$px2rpx(styles.goods_border_radius)}rpx`
                                }"
                            >
                                <view class="goods-image">
                                    <view class="u-image">
                                        <u-image :src="item.image" width="100%" height="100%" />
                                    </view>
                                </view>
                                <view class="goods-info p-10">
                                    <view
                                        v-if="content.show_title"
                                        class="m-b-10 name"
                                        :style="{
                                            color: styles.title_color
                                        }"
                                    >
                                        <view :class="content.style == 2 ? 'line-1' : 'line-2'">
                                            {{ item.name || '这里是商品标题' }}
                                        </view>
                                    </view>
                                    <view
                                        class="muted xs"
                                        :style="{
                                            color: styles.sell_color
                                        }"
                                        v-if="content.style == 1 && content.show_sell"
                                    >
                                        已预定{{ item.activity_sales }}件
                                    </view>
                                    <view
                                        class="flex price-btn flex-wrap"
                                        v-if="content.style == 1"
                                    >
                                        <view class="flex-1 flex col-baseline">
                                            <view v-if="content.show_price" class="price m-r-10">
                                                <price
                                                    :content="item.activity_price"
                                                    :color="styles.price_color"
                                                    :font-weight="500"
                                                    mainSize="34rpx"
                                                    minorSize="26rpx"
                                                />
                                            </view>
                                            <view v-if="content.show_scribing_price">
                                                <price
                                                    :content="item.sell_price"
                                                    color="#999999"
                                                    mainSize="26rpx"
                                                    minorSize="26rpx"
                                                    :line-through="true"
                                                />
                                            </view>
                                        </view>
                                        <view
                                            class="buy-btn xs"
                                            v-if="content.style == 1 && content.show_btn"
                                            :style="{
                                                'background-color': styles.btn_bg_color,
                                                color: styles.btn_color
                                            }"
                                        >
                                            {{ content.btn_text }}
                                        </view>
                                    </view>
                                    <view
                                        class="flex price-btn flex-wrap row-center"
                                        v-if="content.style == 2"
                                    >
                                        <view v-if="content.show_scribing_price">
                                            <price
                                                :content="item.sell_price"
                                                color="#999999"
                                                mainSize="26rpx"
                                                minorSize="26rpx"
                                                :line-through="true"
                                            />
                                        </view>
                                    </view>
                                    <view
                                        class="flex price-btn flex-wrap row-center"
                                        v-if="content.style == 2"
                                    >
                                        <view
                                            v-if="content.show_price"
                                            class="presell-price m-t-10"
                                            :style="{
                                                backgroundColor: styles.btn_bg_color,
                                                color: styles.btn_color
                                            }"
                                        >
                                            预售价
                                            <price
                                                :content="item.activity_price"
                                                :font-weight="500"
                                                mainSize="26rpx"
                                                minorSize="26rpx"
                                            />
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </router-link>
                    </view>
                </view>
            </view>
        </view>
    </widget-root>
</template>

<script type="text/javascript">
export default {
    props: {
        content: {
            type: [Object, Array]
        },
        styles: {
            type: [Object, Array]
        }
    },
    data() {
        return {}
    },
    methods: {},
    computed: {
        headerStyle() {
            const { header_bg_type, header_bg_image } = this.content
            const { header_bg_color } = this.styles
            return header_bg_type == 1
                ? {
                      'background-color': header_bg_color
                  }
                : {
                      'background-image': `url(${this.$getImageUri(header_bg_image)})`
                  }
        }
    }
}
</script>

<style lang="scss" scoped>
.seckill {
    overflow: hidden;

    .seckill-header {
        color: #fff;
        height: 100rpx;
        background-color: #ff624b;
        background-repeat: no-repeat;
        background-size: 100% auto;
        padding: 0 10rpx 0 20rpx;
    }

    .seckill-goods {
        .goods-lists {
            overflow: hidden;

            &.swiper {
                overflow-x: auto;
                overflow-y: hidden;
                display: flex;

                .goods-wrap {
                    flex: 0 0 36%;
                    width: 36%;
                }
            }

            &.lists {
                .goods-wrap {
                    .goods-item {
                        flex-direction: row;

                        .goods-image {
                            width: 240rpx;
                            padding-top: 240rpx;
                        }

                        .goods-info {
                            position: relative;
                            padding: 20rpx;

                            .name {
                                line-height: 36rpx;
                                height: 72rpx;
                            }

                            .price-btn {
                                position: absolute;
                                right: 20rpx;
                                left: 20rpx;
                                bottom: 20rpx;
                            }
                        }
                    }
                }
            }

            .goods-wrap {
                overflow: hidden;

                .goods-item {
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;

                    .goods-image {
                        position: relative;
                        width: 100%;
                        padding-top: 100%;
                        box-sizing: border-box;

                        .u-image {
                            position: absolute;
                            top: 0;
                            right: 0;
                            bottom: 0;
                            left: 0;
                            width: 100%;
                        }
                    }

                    .goods-info {
                        flex: 1;

                        .name {
                            color: #333333;
                        }

                        .price {
                            @include font_color();
                        }

                        .buy-btn {
                            padding: 12rpx 20rpx;
                            color: #ffffff;
                            background-color: #ff2c3c;
                            border-radius: 60rpx;
                        }
                    }
                }
            }
        }
    }
    .presell-price {
        background-color: #b54bd5;
        padding: 10rpx 30rpx;
        border-radius: 10rpx;
        color: white;
        width: 100%;
        font-size: 26rpx;
    }
}
</style>
